<template>
	<view class="share-order">
		<u-empty v-if="isNotNull" mode="data" icon="/static/images/common/order.png" textSize="18" width="220"
			height="220"></u-empty>
		<block v-else>
			<view class="title-content">
				<view class="title">明细</view>
				<view class="title-two">订单号</view>
				<view class="title">返佣</view>
			</view>
			<block v-for="(res, index) in list" :key="index">
				<view class="detail-content">
					<view class="detail">{{ res.name }}</view>
					<view class="detail-two">{{ res.order }}</view>
					<view class="detail">{{ res.money }}</view>
				</view>
			</block>
			<u-loadmore v-if="list.length != 0" :status="loading.status" :loading-text="loading.loadingText"
				:loadmore-text="loading.loadmoreText" :nomore-text="loading.nomoreText" :icon="true"
				loadingIcon="circle" :line="true" marginBottom="20" iconColor="#cecece" color="#cecece"
				@loadmore="lower" />
		</block>
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import {
		Return_commission
	} from '@/common/api.js';
	export default {
		data() {
			return {
				/* 加载更多 */
				loading: {
					status: 'loadmore', // 加载更多设置
					loadingText: '加载中',
					loadmoreText: '轻轻上拉加载更多',
					nomoreText: '暂时没有了',
				}, // 加载设置

				/* 订单佣金详情 */
				pages: 1, // 页数
				total_page: '', // 总页数
				amount: 20, // 条数
				list: [], // 订单详情列表
				isNotNull: false, // 订单不为空
			};
		},
		onLoad() {
			/* 获取账单明细 */
			this.getDetail(); // 获取账单列表
		},
		onShow() {

		},
		/* 加载更多 */
		onReachBottom() {
			this.lower(); // 加载更多
		},
		methods: {

			/* 账单明细 */
			getDetail() {
				const that = this;
				const params = {
					page: that.pages,
					limit: that.amount
				};
				Return_commission(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						that.total_page = result.last_page;
						that.list = result.data.map(item => {
							return {
								name: item.remarks,
								order: item.orderSn,
								money: item.money
							};
						});
						if (that.list.length == 0) {
							this.loading.status = 'nomore';
							that.isNotNull = true;
						} else {
							that.isNotNull = false;
						};
						if (that.list.length == that.total_amount) {
							that.loading.status = 'nomore';
						};
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 加载下一页数据 */
			getMoreDetail() {
				const that = this;
				const params = {
					page: that.pages,
					limit: that.amount
				};
				Return_commission(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						that.total_page = result.last_page;
						let moreList = result.data.map(item => {
							return {
								name: item.remarks,
								order: item.orderSn,
								money: item.money
							};
						});
						for (let i = 0; i < moreList.length; i++) {
							that.list.push(moreList[i]);
						};
						if (that.pages <= that.total_page) {
							this.loading.status = 'loadmore';
						} else {
							setTimeout(() => {
								this.loading.status = 'nomore';
							}, 700);
						};
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 账单详情向下滚动 */
			lower() {
				const that = this;
				if (that.pages <= that.total_page) {
					this.loading.status = 'loading';
					setTimeout(() => {
						that.pages = that.pages + 1;
						this.getMoreDetail();
					}, 700);
				} else {
					this.loading.status = 'nomore';
				};
			},
		}
	}
</script>

<style lang="scss">
	.share-order {
		// margin: 20rpx 0;
		padding: 20rpx 18px;
		font-family: PingFang_Medium;

		.title-content {
			display: flex;
			align-items: center;

			.title {
				width: 25%;
				color: #89898C;
				text-align: center;
				// font-weight: 600;
				font-size: 34rpx;
				font-family: PingFang_Bold;
			}

			.title-two {
				width: 50%;
				color: #89898C;
				text-align: center;
				// font-weight: 600;
				font-size: 34rpx;
				font-family: PingFang_Bold;
			}
		}

		.detail-content {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;

			&:nth-of-type(n+1) {
				margin-top: 40rpx;
			}

			.detail {
				width: 25%;
				color: #000000;
				font-size: 28rpx;
				text-align: center;
			}

			.detail-two {
				width: 50%;
				text-align: center;
				font-size: 26rpx;
			}
		}
	}
</style>
